<!-- 详情 -->
<template>
  <div class="box">
    <div class="content">
      <ColumnLabel :label="`${WarehouseStore.tabType}详情`">
        <el-button @click="back">
          <SvgIcon name="back" width="14px" height="14px" /> &nbsp;返回数据列表
        </el-button>
      </ColumnLabel>
      <div class="content_body">
        <component :is="assembly" :info="info"></component>
        <div class="content_body_right">
          <InfoMap :type="url" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, onMounted, reactive } from 'vue'
import { listInforGet } from '@/api/usemap'

import CableWell from './info/CableWell.vue'
// import Hardware from './info/Hardware.vue'
import Lamp from './info/Lamp.vue'
import LampPost from './info/LampPost.vue'
import LampPostTailpiece from './info/LampPostTailpiece.vue'
import Loop from './info/Loop.vue'
import SingleLamp from './info/SingleLamp.vue'
import Transformer from './info/Transformer.vue'
import InfoMap from './info/InfoMap.vue'

import useWarehouseStore from '@/store/modules/warehouse'
const WarehouseStore = useWarehouseStore()
const url = ref<string>('')
const assembly = ref()
//  判断组件
const assemblyType = () => {
  switch (WarehouseStore.tabType) {
    case '电缆井':
      url.value = 'well'
      break;
    case '灯':
      url.value = 'lamp'
      break;
    case '灯杆':
      url.value = 'lampPost'
      break;
    case '灯杆附属物':
      url.value = 'tailpiece'
      break;
    case '回路':
      url.value = 'loop'
      break;
    case '单灯控制器':
      url.value = 'singleLamp'
      break;
    case '变压器':
      url.value = 'transformer'
      break;
  }
  init()
}
//  详情
let info = reactive<any | null>(null)
const init = async () => {
  try {
    const { data } = await listInforGet(url.value, WarehouseStore.infoList.id)
    info = data
    switch (WarehouseStore.tabType) {
      case '电缆井':
        assembly.value = CableWell
        break;
      case '灯':
        assembly.value = Lamp
        break;
      case '灯杆':
        assembly.value = LampPost
        break;
      case '灯杆附属物':
        assembly.value = LampPostTailpiece
        break;
      case '回路':
        assembly.value = Loop
        break;
      case '单灯控制器':
        assembly.value = SingleLamp
        break;
      case '变压器':
        assembly.value = Transformer
        break;
    }
  } catch (error) {

  }
}

//  返回 
import useSettingStore from '@/store/modules/setting'
let SettingStore = useSettingStore()
const back = () => {
  SettingStore.detailsShow = !SettingStore.detailsShow
}

onMounted(() => {
  assemblyType()
})
</script>

<style scoped lang="scss">
.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 199;
  background-color: #e4e4e4;
  padding: 10px;

  .content {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;

    .content_body {
      display: flex;
      height: calc(100vh - 65px);
      border-top: 1px solid #EAEEF6;

      .content_body_right {
        flex: 1;
        background-color: #e4e4e4;
      }
    }
  }
}
</style>